<template>
  <div>
    <span>x:{{ x }},y:{{ y }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const x = ref(0);
const y = ref(0);
const onMousemove = (e) => {
  x.value = e.clientX;
  y.value = e.clientY;
  console.log(x.value, y.value);
};
onMounted(() => {
  window.addEventListener("mousemove", onMousemove);
});
onUnmounted(() => {
    window.removeEventListener("mousemove", onMousemove);
});
</script>

<style lang="scss" scoped></style>
